<template>
	<view class="journal">
		<view class="list" v-for=" (val,key,i) in centendata" :key="key">
			<view class="top">
				<view class="title">
					{{key}}
				</view>
			</view>
			<view class="content" v-for="item in val">
				<view class="top">
					<view class="left">
						<!-- 对瑞能xxxx项目进行操作 -->
						{{item.title}}
					</view>
					<view class="right">
						<!-- 2023-03-23 22:31 -->
						{{item.createtime}}
					</view>
				</view>
				<view class="bottom">
					<!-- 对瑞能xxxx项目详情查看......... -->
					{{item.ms}}
				</view>
			</view>
		</view>
		<u-empty text="暂无操作日志哦~~" mode="list" v-if="centendata.length==0" margin-top='50'></u-empty>
		<view class="noMore" v-if="last_page==form.page&&centendata.length!=0"
			style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
			数据加载完成...
		</view>
	</view>
</template>

<script>
	import {
		userOperateLog
	} from '@/request/api.js'
	export default {
		data() {
			return {
				ListObject: {},
				centendata: {
					// '01-17':[]
				},
				last_page: 1,
				form: {
					page: 1,
				},
			}
		},
		onLoad() {
			this.getOperateLog()
		},
		onReachBottom() {
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getOperateLog()
			}
		},
		methods: {
			async getOperateLog() {
				let res = await userOperateLog(this.form)
				this.last_page = Math.ceil(res.data.total / 10)
				// let value = ListObject[Object.keys(ListObject)[Object.keys(ListObject).length - 1]]
				// let key = Object.keys(ListObject)[Object.keys(ListObject).length - 1]
				// console.log(value, key)
				// const mergeList = this.arrayGroupBy(res.data.list, 'day')
				// console.log(mergeList)
				let target = this.getNewArr(res.data.list)
				if (target.length != 0) {
					//把对象键值循环出来
					for (var l in target) {
						for (var i in this.centendata) {
							//如果键值相等就用数组处理方法把请求回来的数据push进去
							if (i == l) {
								this.centendata[i].push(...target[l]);
							}
						}
						//如果没有这个键值，那么就赋值一个
						if (!this.centendata.hasOwnProperty(l)) {
							this.centendata[l] = target[l]
						}
					}
					this.$forceUpdate()
					console.log(this.centendata)
				}
			},
			groupBy(array, f) {
				const groups = {}
				array.forEach(function(o) {
					const group = JSON.stringify(f(o))
					groups[group] = groups[group] || []
					groups[group].push(o)
				})
				return Object.keys(groups).map(function(group) {
					return groups[group]
				})
			},
			arrayGroupBy(list, groupId) {
				const sorted = this.groupBy(list, function(item) {
					return [item[groupId]]
				})
				return sorted
			},
			getNewArr(arr) {
				let keys = arr.map((val) => {
					return val.day;
				});
				//数组去重，这样就得到了一共有多少个key
				keys = [...new Set(keys)];
				//声明一个target来装数组
				let target = {};
				//将target对象的每一项设成数组格式
				keys.forEach((val) => {
					target[val] = [];
				});
				//如果key值相等，则push到同一个数组
				arr.map((val) => {
					keys.some((value) => {
						if (val.day == value) {
							target[value].push(val);
							return;
						}
					});
				});
				return target;
				//target是一个对象，里面是分完类的数组的合集，
				// console.log(target);
				//这是对象里的第一个分类的数组
				// console.log(target[Object.keys(target)[0]]);
			}


		}
	}
</script>

<style lang="scss" scoped>
	.journal {
		.list {
			margin: 10rpx 20rpx;
			color: #505050;
			font-size: 28rpx;

			.top {
				.title {
					margin-left: -20rpx;
					background-image: url(../../static/journal.png);
					width: 140rpx;
					height: 64rpx;
					line-height: 58rpx;
					background-repeat: no-repeat;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					color: #fff;
					background-size: 100%;
					padding-left: 28rpx;
				}
			}

			.content {
				padding: 20rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					margin: 10rpx 0;

					.right {
						color: #BABABA;
						font-size: 24rpx;
						text-align: right;
						width: 354rpx;
					}
				}

				.bottom {
					margin: 10rpx 0;
					color: #BABABA;
				}
			}
		}
	}
</style>
<style>
	/* @page{
		background-color: #E2E2E2;
	} */
	page {
		background-color: #f6f6f6;
	}
</style>
